<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta index="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 1400px;
            height: 740px;
        }

        .first {
            position: relative;
        }

        .first div {
            position: absolute;
            top: 0;
            left: 0;
            /* background-color: red; */
        }
    </style>
</head>

<body>
    <main id="app">
        <div class="first">
            <div @mousedown='first()'></div>
            <img :src="'image/' + index + '.png'" alt="">
        </div>
    </main>
    <script>
        var pageX = 0
        var vue = new Vue({
            el: '#app',
            data: {
                index: 0
            },
            methods: {
                first: function ($event) {
                    var that = this
                    var move = function (e) {
                        that.mousemove(e)
                    }
                    document.addEventListener('mousemove', move)
                    document.addEventListener('mouseup', function () {
                        // 删除监听调用的方法 要和  监听事件调用的方法保持一致 
                        document.removeEventListener('mousemove', move)
                    })
                },
                mousemove: function (e) {

                    if (pageX > e.pageX) {
                        this.index++
                        if (this.index > 35) {
                            this.index = 0
                        }
                    }
                    else {
                        this.index--
                        if (this.index < 1) {
                            this.index = 35
                        }
                    }
                    pageX = e.pageX
                }
            }
        })
    </script>
</body>

</html>